<template>
	<view class="layer">
		<!-- <IndexHead :config="navConfig"/> -->
		
		<!-- 基本信息 -->
		<view class="headIcon">
			<view>
				<view class="SG"></view><i>基本信息</i>
			</view>
		</view>
		<!-- 基本信息表单 -->
			<view class="table1">
					<view class="order-info-line">
						<text class="order-label">商家名称</text>
						<input type="text" placeholder="请输入商家名称" placeholder-style="color:#999999;" class="order-input">
					</view>
					<view class="order-info-line">
						<text class="order-label">联系人</text>
						<input type="text" placeholder="请输入联系姓名" placeholder-style="color:#999999;" class="order-input">
					</view>
					<view class="order-info-line">
						<text class="order-label">联系方式</text>
						<input type="text" placeholder="请输入联系人电话" placeholder-style="color:#999999;" class="order-input">
					</view>
					<view class="order-info-line">
						<text class="order-label">类 型</text>
						<view class="content">
							<view >
								
								<view class="list">
									<xfl-select 
									:list="list"
									:clearable="false"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="true"  
									:style_Container="listBoxStyle1"
									:placeholder = "'placeholder'"
									:initValue="'餐饮商家'"
									:selectHideType="'independent'"
									>
									</xfl-select>
								</view>
							</view>
						</view>
						
					</view>
					<view class="order-info-line">
						<text class="order-label">所在地区</text>
						<view class="order-input" type="default" @click="showMulLinkageThreePicker"><text>省、市、区</text></view><br>
						
					</view>
					<!-- <view class="order-info-line">
						<text class="order-label">所在城市</text>
						<view class="content">
							<view >
								
								<view >
									<xfl-select 
									:list="list"
									:clearable="false"
									:showItemNum="5" 
									:listShow="false"
									:isCanInput="true"  
									:style_Container="listBoxStyle1"
									:placeholder = "'placeholder'"
									:initValue="'沈阳市'"
									:selectHideType="'independent'"
									>
									</xfl-select>
								</view>
							</view>
						</view>
						
					</view> -->
					<view class="order-info-line">
						<text class="order-label">详细地址</text>
						<input type="text" placeholder="请输入详细地址" placeholder-style="color:#999999;" class="order-input">
					</view>
					<view class="order-info-line">
						<text class="order-label">营业时间</text>
						<input type="text" placeholder="9:00-18:00  " placeholder-style="color:#999999;" class="order-input">
					</view>
			</view>
		
		<!-- 详细介绍 -->
		<view class="headIcon">
			<view>
				<view class="SG"></view><i>详细介绍</i>
			</view>
			<view class="table2">
				<label>详细说明</label>
				<textarea name="comment" id="comment" placeholder="请输入详细说明"></textarea>
			</view>
		</view>
		
		<view class="xxtext">请上传营业执照、经营许可证、环境等相关照片</view>
		
		<view class="scText">
			<view class="shangchuan"><navigator url=""><image src="/static/myPic/shangchuan.png"></image></navigator></view>
			<view class="scPic">上传照片</view>
		</view>
		
		<view class="xxxtext">请上传身份证正反面</view>
		
		<view class="scText">
			<view class="shangchuan"><navigator url=""><image src="/static/myPic/shangchuan.png"></image></navigator></view>
			<view class="scPic">上传照片</view>
		</view>
		
		<!-- 提交 -->
			<navigator class="btn"><text>提交等待审核</text></navigator>
			
			<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvuePicker from '../../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../../../components/mpvue-citypicker/mpvueCityPicker.vue';
	import xflSelect from '../../../../components/xfl-select.vue';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker,
			xflSelect
		},
		data() {
			return {
				
				listBoxStyle1: `height: 50upx; font-size: 26upx;margin-top: 10upx;`,
				list: [
					'餐饮商家',
					'娱乐商家', 
					'旗舰店',
					'线上专卖店',
					'星巴克'
					
				],
				curTabIndex: 0,
				// mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[]
			}
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			// 单列
			showSinglePicker() {
				this.pickerValueArray = this.pickerSingleArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			// 二级联动选择
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
			},
			tapTab(index){
				this.tabIndex = index;
				console.log('游记'+index);
				if(this.tabIndex == 0){
					uni.switchTab({
						url:'/pages/join/jiaMeng'
					})
				}
				if(this.tabIndex == 1){
					this.isShowPullTc = !this.isShowPullTc
				}else{
					this.isShowPullTc = false;
				}
			},
			visibleChange(isShow){ // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			change({newVal, oldVal, index, orignItem}){ 
				console.log(newVal, oldVal, index, orignItem);
			}
		},
		onBackPress() {
		  if (this.$refs.mpvuePicker.showPicker) {
		  	this.$refs.mpvuePicker.pickerCancel();
		    return true;
		  }
		  if (this.$refs.mpvueCityPicker.showPicker) {
		  	this.$refs.mpvueCityPicker.pickerCancel();
		    return true;
		  }
		},
			onUnload() {
				if (this.$refs.mpvuePicker.showPicker) {
					this.$refs.mpvuePicker.pickerCancel()
				}
				if (this.$refs.mpvueCityPicker.showPicker) {
					this.$refs.mpvueCityPicker.pickerCancel()
				}
			}
	
		 
		// 	// 或者在 main.js 中注册为全局组件 
		// 	import xflSelect from './components/xfl-select/xfl-select.vue';
		// 	Vue.component('xfl-select', xflSelect);
		
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 100%;
		background-color: #fff;
	}
	.bgc{
		position: relative;
		width: 750upx;
		height: 180upx;
		background-image: linear-gradient(to bottom, #5875FD,#54ADFF, #fff);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#54ADFF', endColorstr='#fff', GradientType=1); 	
	}
	
	.headIcon{
		position: absolute;
		margin-top: 64upx;
	}
	
	.headIcon .SG{
		width: 5upx;
		height: 23upx;
		opacity: 1;
		background: rgba(84,176,255,1);
		margin-left: 37upx;
		margin-top: -60upx;
		float: left;
	}
	.headIcon i{
		width: 150upx;
		height: 31upx;
		margin-left: 54upx;
		font-size: 32upx;
		font-family: PingFang SC Regular;
		margin-top: -60upx;
		float: left;
		/* color: #fff; */
		
	}
	/* 基本信息表 */
	.table1{
		width: 690upx;
		height: 750upx;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 90upx;
		margin-bottom: 50upx;
	}
	.order-info-line{
		width: 614upx;
		margin-top: 44upx;
		display: flex;
		flex-direction: row;
	}
	.order-label{
		width: 125upx;
		display: block;
		font-size: 28upx;
		height: 28upx;
		padding-top: 22upx;
		margin-left: 30upx;
		
	}
	.order-input{
		height: 28upx;
		width: 400upx;
		font-size: 28upx;
		padding-top: 22upx;
		margin-left: 80upx;
	}
	.order-input text{
		color: #999999;
		font-size: 28upx;
	}
	.order-info-line select{
		width: 323upx;
		height: 60upx;
		opacity: 1;
		background: rgba(255,255,255,1);
		border-radius: 10upx 10upx 10upx 10upx;
		margin-left: 75upx;
		margin-top: 10upx;
	}
	.order-info-line option{
		font-size: 28upx;
	}
	
	/* 详细信息头 */
	.xiangxi{
		width: 540upx;
		margin-top: 34upx;
		margin-left: 6upx;
		height:27upx;
	}
	.xiangxi .SG{
		width: 5upx;
		height: 23upx;
		opacity: 1;
		background: rgba(84,176,255,1);
		margin-left: 37upx;
		margin-top: -87upx;
		float: left;
	}
	.xiangxi i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
		margin-top: 34upx;
	}
	.table2{
		width: 690upx;
		height: 293upx;
		background: rgba(255,255,255,1);
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 30upx;
		/* margin-bottom: 200upx; */
	}
	.table2 label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 32upx;
		margin-top: 34upx;
		float: left;
	}
	.table2 textarea{
		float: left;
		width: 415upx;
		height: 200upx;
		box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
		border-radius: 10upx 10upx 10upx 10upx;
		margin-left: 44upx;
		margin-top: 31upx;
		font-size: 28upx;
	}
	
	.xxxtext{
		width: 600upx;
		height: 22upx;
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		margin-left: 36upx;
		margin-top: 40upx;
	}
	.xxtext{
		width: 600upx;
		height: 22upx;
		font-size: 20upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		margin-left: 36upx;
		margin-top: 500upx;
		position: relative;
	}
	.scText{
		width: 229upx;
		height: 164upx;
		background: #F3F3F3;
		box-shadow: 0upx 0upx 15upx 0upx #F3F3F3;
		margin-left: 29upx;
		margin-top: 30upx;
		
	}
	.scText .shangchuan image{
		width: 36upx;
		height: 36upx;
		margin-left: 96upx;
		margin-top: 54upx;
	}
	.scText .scPic{
		width: 120upx;
		height: 21upx;
		font-size: 22upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		margin-left: 71upx;
		margin-top: 26upx;
	}
	/* 提交 */
	.btn{
		width: 388upx;
		height: 72upx;
		margin-left: 181upx;
		margin-top: 60upx;
		margin-bottom: 34upx;
		border-radius: 35upx;
		background-image: linear-gradient(to right, #54B0FF,#577AFF);
		filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
	}
	.btn text{
		width: 170upx;
		height: 28upx;
		margin-left: 110upx;
		margin-top: 18upx;
		font-size: 28upx;
		color: #fff;
		position: absolute;
	}
	
	.pullTc{
		width:140upx;
		height:160upx;
		border-radius:10upx;
		background-color: #fff;
		padding-top: 12upx;
		box-sizing: border-box;
		position: absolute;
		z-index: 10;
		top:44upx;
		left: 208upx;
		}
	.pullTc-item{
		height: 40upx;
		line-height: 40upx;
		font-size: 24upx;
		text-align: center;
		color: #666666;
		}
	.content .list{
		width: 283upx;
		height: 35upx;
		opacity: 1;
		background: rgba(255,255,255,1);
		border-radius: 30upx;
		/* text-align: center; */
		margin-left: 75upx;
		margin-top: 2upx;
		font-size: 22upx;
	}
</style>
